<template>
<li class="todo-line">
    <h3>
        <input type="checkbox" @click="itemCheck(item)" />
        <input class="item-label" v-bind:class="[{'linethrough':lineState}]" v-model="todoItem.text" />
        <p class="item-status" v-show="todoItem.done">finished</p>
        <!--例子7:class绑定和鼠标移入移出事件-->
        <p :class="{'linethrough':lineState}" @mouseover="showlineState" @mouseout="hiddenlineState" class="item-delete" @click="deleteClick">Delete</p>
    </h3>
</li>
</template>

<script>
export default {
    name: "todo",
    // 自定义组件的自定义参数
    props: {
        todoItem: Object,
        index: Number
    },
    data() {
        return {
            lineState: false
        };
    },
    methods: {
        itemCheck() {
            this.todoItem.done = !this.todoItem.done;
        },
        deleteClick() {
            this.$emit("deleteTodo", this.index);
        },
        showlineState() {
            this.lineState = true;
        },
        hiddenlineState() {
            this.lineState = false;
        },
    },
};
</script>

<style scoped>
.todo-line {
    height: 30px;
}

.item-status {
    display: inline;
    background: red;
    color: white;
    padding: 0 5px;
    font-size: 12px;
}

.item-delete {
    display: none;
    text-decoration: underline;
    font-size: 12px;
    color: gray;
    cursor: pointer;
}

.item-label {
    display: inline;
}

.line-through {
    text-decoration: line-through;
}

.item-delete:hover {

    text-decoration: line-through;

}

.linethrough {
    text-decoration: line-through;
}

h3:hover .item-delete {
    display: inline;
}
</style>
